
import { useEffect, useState } from 'react'
import { Table, Button, Modal, toast } from '../dComponent/index'
let dataSource = [{
    name:'张三（法外狂徒）',
    tel:'1221000101',
    tel1:'222121212121',
    ii:'Sdasa DA仨大'
},{
    name:'李四（警察）',
    tel:'123123',
    tel1:'22123',
    ii:'Sdasa DA仨大'
},{
    name:'大伟哥（哈哈哈）',
    tel:'123',
    tel1:'12332112',
    ii:'Sdasa DA仨大'
},{
    name:'张三（法外狂徒）',
    tel:'1221000101',
    tel1:'222121212121',
    ii:'Sdasa DA仨大'
},{
    name:'李四（警察）',
    tel:'123123',
    tel1:'22123',
    ii:'Sdasa DA仨大'
},{
    name:'大伟哥（哈哈哈）',
    tel:'123',
    tel1:'12332112',
    ii:'Sdasa DA仨大'
},{
    name:'张三（法外狂徒）',
    tel:'1221000101',
    tel1:'222121212121',
    ii:'Sdasa DA仨大'
},{
    name:'李四（警察）',
    tel:'123123',
    tel1:'22123',
    ii:'Sdasa DA仨大'
},{
    name:'大伟哥（哈哈哈）',
    tel:'123',
    tel1:'12332112',
    ii:'Sdasa DA仨大'
},{
    name:'张三（法外狂徒）',
    tel:'1221000101',
    tel1:'222121212121',
    ii:'Sdasa DA仨大'
},]
let timer
function Ptable(props){
    let [loading, setLoading] = useState(true)
    let [data, setData] = useState([])
    let [lgShow, setlgShow] = useState(false)
    function next(){

    }
    function prve(){

    }
    useEffect(()=>{
        clearTimeout(timer)
        timer = setTimeout(() => {
            setData(dataSource)
            setLoading(false) 
        }, 3000);
        return()=>{

        }
    },[])
    return(
        <div className="page">
            <h2>标题</h2>
            <div className="flexBox">
                <Table
                    dataSource={data}
                    nextPage={next}
                    prvePage={prve}
                    showIndex
                    columns={[
                        {
                            name:'姓名',
                            key:'name',
                            align:'center'
                        },{
                            name:'电话',
                            key:'tel',
                            align:'center'
                        },{
                            name:'电话1',
                            key:'tel1',
                            align:'center'
                        },{
                            name:'描述',
                            key:'ii',
                            align:'center'
                        },{
                            name:'操作',
                            align:'center',
                            customize:(row)=>{
                                return <div style={{display:'flex',flexWrap:'wrap'}}>
                                    <Button
                                        onClick={()=>{
                                            console.log(row)
                                        }}
                                        style={{margin:'10px'}}
                                        size='sm'
                                        type='warn'
                                    >
                                        修改
                                    </Button>
                                    <Button
                                        type='error'
                                        onClick={()=>{
                                            setlgShow(true)
                                            console.log(row)
                                        }}
                                        style={{margin:'10px'}}
                                        size='sm'
                                    >
                                        删除
                                    </Button>
                                </div>
                            }
                        }
                    ]}
                    totalCount={49}
                    pageSize={10}
                    pageChange={(page)=>{
                        console.log(page)
                        // setData([])
                        setLoading(true)
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            setData(dataSource)
                            setLoading(false)
                        }, 200);
                    }}
                    loading={loading}
                    selectChange={(Rows)=>{
                        console.log(Rows)
                    }}
                />
            </div>
            <Modal
                title='删除确认'
                // action={action}
                visible={lgShow}
                size='sm'
                close={()=>{
                    setlgShow(false)
                }}
                buttons={[
                    <Button
                        onClick={()=>{
                            setlgShow(false)
                        }}
                        size='sm'
                    >取消</Button>,
                    <Button
                        type='error'
                        size='sm'
                        onClick={()=>{
                            setlgShow(false)
                            setLoading(true)
                            clearTimeout(timer)
                            timer = setTimeout(() => {
                                setData(dataSource)
                                setLoading(false)
                                toast.success('删除成功')
                            }, 200);
                        }}
                    >确认</Button>
                ]}
            >
                <p>确定要删除这条数据吗</p>
            </Modal>     
        </div>
    )
}
export default Ptable